<template>
  <h3>轮播图管理</h3>
  <el-divider />
  <el-table :data="carouselList">
    <el-table-column width="50px" type="index" />

    <el-table-column label="预览">
      <template #default="scope">
        <el-image
          style="width: 200px; height: 100px"
          :src="`${base_url + scope.row.caPath}`"
          fit="cover"
        ></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="caPath" label="路径" width="300px" />
    <el-table-column label="标签" width="100px">
      <template #default="scope">
        <el-tag
          :type="
            scope.row.caTag == 'jpg'
              ? 'primary'
              : scope.row.caTag == 'webp'
              ? 'success'
              : warning
          "
          >{{ scope.row.caTag }}</el-tag
        >
      </template>
    </el-table-column>

    <el-table-column width="100px" label="是否展示">
      <template #default="scope">
        <el-switch
          @change="change_state(scope.row.carouselId, scope.row.isShow)"
          v-model="scope.row.isShow"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>

    <el-table-column prop="createTime" label="创建时间" width="180px" />
    <el-table-column prop="updateTime" label="更新时间" width="180px" />
    <el-table-column label="操作" width="180px">
      <template #default="scope">
        <el-button type="warning" size="small">编辑</el-button>
        <el-button
          type="danger"
          @click="carousel_del(scope.row.carouselId)"
          size="small"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import http from "../axios";
const base_url = ref(import.meta.env.VITE_BASE_APP_PATH);
const carouselList = ref([]);

const carousel = ref({});

onMounted(() => {
  carousel_list();
});

const carousel_list = () => {
  http.get("/carousel/list", { params: { state: null } }).then((resp) => {
    carouselList.value = resp.data.data;
  });
};

const change_state = (id, val) => {
  carousel.value.carouselId = id;
  carousel.value.isShow = val;
  http.put("/carousel/update", carousel.value).then((resp) => {
    if (resp.data.code != "200") {
      ElMessage.error(resp.data.message);
      return;
    }
    ElMessage.success(resp.data.message);
    carousel_list();
  });
};

const carousel_del = (id) => {
  ElMessageBox.confirm("确定删除该轮播图信息吗？", "删除提示", {
    type: "warning",
  }).then(() => {
    http.delete(`/carousel/del/${id}`).then((resp) => {
      if (resp.data.code != "200") {
        ElMessage.error(resp.data.message);
        return;
      }
      ElMessage.success(resp.data.message);
      carousel_list();
    });
  });
  console.log(id);
};
</script>

<style></style>
